$(".nav-gzh").mouseover(function(e) {
    $(this).next().show()
})
$(".nav-gzh").mouseleave(function(e) {
    $(this).next().hide()
})

$(".tab-list li").click(function(e) {
    let idx = $(this).index()
    console.log(idx)
    $(this).addClass("tab-select").siblings().removeClass("tab-select")
    $(this).children(".tab-down").show()
    $(this).siblings().children(".tab-down").hide()
    $(".content-box").eq(idx).show().siblings().hide()

})

// 筛选框按钮
$(".screen").click(function (e) {
    e.stopPropagation();
    $(this).children(".screen-box").slideToggle();
})
$(".screen ul li").click(function (e) {
    // key为筛选框的选项内容
    let key = $(this).text()
    console.log(key)

    $(this).parent().siblings('.s-type').text(key)   // 选择后改变筛选框文字
})

$(document).click(function (e) {
    $(".screen-box").slideUp();
})

// 点击加载更多
$(".more-li").click(function () {
    let html =  `
    <li class="c-item flex between align-center">
        <div>
            <div class="c-title flex "><img src="./resource/images/search/banshiyy.png" alt=""> 出入境预约</div>
            <div class="c-desc">
                办事指南：<a href="#">2021深圳护照网上预约操作步骤详解</a>
            </div>
        </div>
        <div class="li-btn">
            <a href="#">立即办理</a>
        </div>
    </li>
    <li class="c-item flex between align-center">
        <div>
            <div class="c-title flex "><img src="./resource/images/search/yimiaoyy.png" alt=""> 出入境预约</div>
            <div class="c-desc">
                办事指南：<a href="#">2021深圳护照网上预约操作步骤详解</a>
            </div>
        </div>
        <div class="li-btn">
            <a href="#">立即办理</a>
        </div>
    </li>
    <li class="c-item flex between align-center">
        <div>
            <div class="c-title flex "><img src="./resource/images/search/jingdianyy.png" alt=""> 出入境预约</div>
            <div class="c-desc">
                办事指南：<a href="#">2021深圳护照网上预约操作步骤详解</a>
            </div>
        </div>
        <div class="li-btn">
            <a href="#">立即办理</a>
        </div>
    </li>`
    $(this).parent().before(html);

    // 如果没有更多 隐藏按钮
    // if () {
    //     $(this).hide();
    // }
})

$('.search-btn').click(function() {
    let val = $('#keyword').val()
    console.log(val)
})


// 添加最近搜索

var searchArr;
//定义一个search的，判断浏览器有无数据存储（搜索历史）
if (localStorage.search) {
    //如果有，转换成 数组的形式存放到searchArr的数组里（localStorage以字符串的形式存储，所以要把它转换成数组的形式）
    searchArr = localStorage.search.split(",")
} else {
    //如果没有，则定义searchArr为一个空的数组
    searchArr = [];
}
//把存储的数据显示出来作为搜索历史
MapSearchArr();


$(".search-btn").on("click", function() {
    var val = $("#keyword").val();
    //点击搜索按钮时，去重
    KillRepeat(val);
    //去重后把数组存储到浏览器localStorage
    localStorage.search = searchArr;
    //然后再把搜索内容显示出来
    MapSearchArr();
});


function MapSearchArr() {
    var tmpHtml = "";
    for (var i = 0; i < searchArr.length; i++) {
        tmpHtml += "<li>" + searchArr[i] + "</li>"
    }
    $(".record").html(tmpHtml);
}
//去重
function KillRepeat(val) {
    var kill = 0;
    for (var i = 0; i < searchArr.length; i++) {
        if (val === searchArr[i]) {
            kill++;
        }
    }
    if (kill < 1) {
        searchArr.push(val);
    }
}

// 清空最近搜索
$(".clean").click(function() {
    searchArr = [];
    localStorage.search = []
    $(".record").html('')
})

// 城市选择开关
$('.local-city').click(function() {
    $(".sel-city").show()
})

$(".close").click(function() {
    $(".sel-city").hide()

})

// 二维码 悬停事件
$(".nav-gzh").mouseover(function(e) {
    console.log(23)
    $(this).next().show()
})
$(".nav-gzh").mouseleave(function(e) {
    $(this).next().hide()
})
$(".wx-bdb, .dy-bdb, .bdb-app, .sp-bdb").mouseover(function() {
    $(this).prev().show()
});
$(".wx-bdb, .dy-bdb, .bdb-app, .sp-bdb").mouseleave(function() {
    $(this).prev().hide()
});